<script setup>
import {ref, computed} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {CheckRectangleIcon, NoExpressionIcon, TaskAddIcon} from "tdesign-icons-vue-next";

const URL = import.meta.env.VITE_BASE_API_URL
const ICP_BEI_AN_HAO = import.meta.env.VITE_ICP_BEI_AN_HAO
const GONG_AN_BEI_AN_HAO = import.meta.env.VITE_GONG_AN_BEI_AN_HAO
const GONG_AN_BEI_AN_WEB = import.meta.env.VITE_GONG_AN_BEI_AN_WEB
const VITE_PROJECT_FRONT = import.meta.env.VITE_PROJECT_FRONT
const VITE_PROJECT_BACKEND = import.meta.env.VITE_PROJECT_BACKEND
const router = useRouter();
const route = useRoute();
const collapsed = ref(false);
const iconUrl = ref('https://hruiworks-private-1.oss-cn-hangzhou.aliyuncs.com/campus-group/logo/campus-group-logo-long.png');

const activeValue = computed(() => {
  switch (route.path) {
    case '/administrator/home':
      return 'administrator_home';
    case '/administrator/management':
      return 'administrator_management';
    case '/administrator/info':
      return 'administrator_info';
    case '/administrator/activity':
      return 'administrator_activity';
    case '/administrator/feedback':
      return 'administrator_activity_feedback'
    default:
      return 'administrator_home';
  }
});

const changeCollapsed = () => {
  collapsed.value = !collapsed.value;
  iconUrl.value = collapsed.value
      ? 'https://hruiworks-private-1.oss-cn-hangzhou.aliyuncs.com/campus-group/logo/campus-group-logo-one.png'
      : 'https://hruiworks-private-1.oss-cn-hangzhou.aliyuncs.com/campus-group/logo/campus-group-logo-long.png';
};

const changeHandler = (activeValue) => {
  switch (activeValue) {
    case 'administrator_home':
      router.push('/administrator/home');
      break;
    case 'administrator_management':
      router.push('/administrator/management');
      break;
    case 'administrator_info':
      router.push('/administrator/info');
      break;
    case 'administrator_activity':
      router.push('/administrator/activity');
      break;
    case 'administrator_activity_feedback':
      router.push('/administrator/feedback');
      break;
    case 'login':
      router.push({path: '/login', query: {tabValue: "third"}});
      break;
    default:
      break;
  }
};
</script>

<template>
  <t-layout style="height: 100vh">
    <t-aside style="height: 100%; width: auto">
      <t-menu
          theme="light"
          :value="activeValue"
          :collapsed="collapsed"
          @change="changeHandler"
          style="height: 100%;"
      >
        <template #logo>
          <img :width="collapsed ? 35 : 185" :src="iconUrl" alt="logo"/>
        </template>
        <t-menu-group title="活动">
          <t-menu-item value="administrator_activity">
            <template #icon>
              <CheckRectangleIcon />
            </template>
            活动管理
          </t-menu-item>
          <t-menu-item value="administrator_activity_feedback">
            <template #icon>
              <NoExpressionIcon />
            </template>
            活动反馈
          </t-menu-item>
        </t-menu-group>
        <t-menu-group title="管理员">
<!--          <t-menu-item value="administrator_home">-->
<!--            <template #icon>-->
<!--              <t-icon name="app"/>-->
<!--            </template>-->
<!--            仪表盘-->
<!--          </t-menu-item>-->
          <t-menu-item value="administrator_management">
            <template #icon>
              <t-icon name="control-platform"/>
            </template>
            管理员管理
          </t-menu-item>
        </t-menu-group>
        <t-menu-group title="个人">
          <t-menu-item value="administrator_info">
            <template #icon>
              <t-icon name="user"/>
            </template>
            个人页
          </t-menu-item>
          <t-menu-item value="login">
            <template #icon>
              <t-icon name="login"/>
            </template>
            登录页
          </t-menu-item>
        </t-menu-group>
        <template #operations>
          <t-button class="t-demo-collapse-btn" variant="text" shape="square" @click="changeCollapsed">
            <template #icon>
              <t-icon name="view-list"/>
            </template>
          </t-button>
        </template>
      </t-menu>
    </t-aside>

    <t-layout style="flex: 1; display: flex; flex-direction: column; height: 100%">
      <t-header style="background-color: rgba(0,82,217,1); flex-shrink: 0;">
        <!-- Header 内容 -->
      </t-header>
      <t-layout style="flex: 1; overflow-y: auto;">
        <t-content style="flex: 1; padding: 30px;">
          <router-view></router-view>
        </t-content>
        <t-footer style="background-color: rgba(0,82,217,1); color: white;">
          <div>
            Copyright @ 2024-{{
              new Date().getFullYear()
            }} HruiWorks. All Rights
            Reserved
          </div>
          <a style="color: white" :href="GONG_AN_BEI_AN_WEB" rel="noreferrer" target="_blank">
            <img src="/GongAnPic.png" alt="GongAnBeiAn" height="12">
            {{GONG_AN_BEI_AN_HAO}}
          </a>
          &nbsp;
          <a style="color: white" href="http://beian.miit.gov.cn/">{{ICP_BEI_AN_HAO}}</a>
          <div>
            <a style="color: white" :href="VITE_PROJECT_FRONT" rel="noreferrer" target="_blank">
              <img src="/gitee.png" alt="Gitee前端地址" height="12">
              项目前端地址
            </a>
            <a style="color: white" :href="VITE_PROJECT_BACKEND" rel="noreferrer" target="_blank">
              <img src="/gitee.png" alt="Gitee后端地址" height="12">
              项目后端地址
            </a>
          </div>
        </t-footer>
      </t-layout>
    </t-layout>
  </t-layout>

</template>

<style scoped>


</style>